<template>
  <div class="user-auth">
    <div class="banner-box">
      <img class="banner" src="../../assets/image/banner/authBanner.png">
    </div>

    <div class="card-wrap">
      <div class="card">
        <div class="input-wrap">
          <div class="input-title">手机号码</div>
          <input
            v-model="form.phone"
            class="input-content"
            data-name="phone"
            placeholder="请输入手机号码"
            maxlength="11"
            pattern="[0-9]*"
            type="tel"
            disabled
            @input="userInput"
          >
        </div>
        <div class="input-wrap">
          <div class="input-title">姓名</div>
          <input
            v-model="form.name"
            class="input-content"
            type="text"
            data-name="name"
            maxlength="10"
            placeholder="请输入姓名"
            @input="userInput"
          >
        </div>
        <div class="input-wrap">
          <div class="input-title">身份证</div>
          <input
            v-model="form.idCardNumber"
            class="input-content"
            type="text"
            maxlength="18"
            data-name="idCardNumber"
            placeholder="请输入身份证号码"
            @input="userInput"
          >
        </div>
        <SjButton
          :name-str="'提交信息'"
          :tip-str="'请输入完整信息'"
          :can-submit="canSubmit"
          style="margin-top:41px"
          @click="submit"
        >
        </SjButton>
      </div>

      <div class="tip">
        <img src="../../assets/image/icon/icon_warining.png" alt="">
        <span>根据规定，公司需要身份核验请输入您的真实信息，感谢您的配合！</span>
      </div>
    </div>
  </div>
</template>

<script>
import vant from 'vant'
import { userUpdateAPI } from '@/axios/api/visitor'
import SjButton from '@/components/SjButton/index.vue'
export default {
  components: {
    SjButton
  },
  data() {
    return {
      auditId: '',
      form: {
        phone: '',
        name: '',
        idCardNumber: ''
      }
    }
  },
  computed: {
    canSubmit() {
      if (this.form.name && this.form.idCardNumber && this.form.phone) {
        return true
      } else {
        return false
      }
    }
  },
  created() {
    document.title = this.getUnitInfo().name
    this.form.unitId = this.$route.query.unitId
    this.form.phone = this.$route.query.phone

    this.auditId = this.$route.query.auditId
    this.invitePhone = this.$route.query.invitePhone
  },
  methods: {
    userInput(e) {
      this.form[e.target.dataset.name] = e.target.value.replace(/\s*/g, '')
    },
    submit() {
      if (!this.canSubmit) return
      if (!this.form.name) return vant.Toast('请输入姓名')
      const ID_reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
      if (!ID_reg.test(this.form.idCardNumber)) return vant.Toast('身份证格式有误，请重新输入')
      this.sendUserInfo()
    },
    sendUserInfo() {
      userUpdateAPI(this.form).then(res => {
        vant.Toast.success('提交成功')
        localStorage.setItem('visitorH5_userInfo', JSON.stringify(res))
        if (res.isStaff) {
          if (this.auditId) {
            this.$router.replace({ path: '/adminOrderDetail', query: { unitId: this.unitId, auditId: this.auditId }})
          } else {
            this.$router.replace({ path: '/adminOrderList' })
          }
        } else {
          this.$router.replace({ path: '/visitor', query: { invitePhone: this.invitePhone }})
        }
      }).catch(res => {
        vant.Toast(res.data.detail || '提交失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-auth {
  .banner-box {
    position: relative;
    width: 100vw;
    height: 50.13vw;
    .banner {
      width: 100%;
      display: block;
    }
  }
}
.card-wrap {
  position: relative;
  z-index: 1;
  padding: 0 15px;
  .card {
    padding: 7px 16px 24px;
    border-radius: 12px;
    box-shadow: 0px 3px 6px rgba(38, 126, 255, 0.2);
    background: #ffffff;

    .input-wrap {
      height: 70px;
      padding: 16px 0 8px;
      border-bottom: 1px solid #f1f2f3;

      .input-title {
        height: 16px;
        line-height: 16px;
        font-size: 11px;
        color: #707070;
      }
      .input-content {
        width: 100%;
        margin-top: 8px;
        height: 21px;
        line-height: 21px;
        font-size: 15px;
        color: black;
      }
    }
  }
  .tip {
    margin: 12px 30px 15px;
    display: flex;

    img {
      height: 14px;
      min-width: 14px;
      margin-right: 3px;
    }

    span {
      line-height: 16px;
      font-size: 11px;
      color: #faad14;
    }
  }
}
</style>
